@import "@/styles/variables";

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.root {
  width: 100%;
}

.root {
  border: 1px solid $color-gray;
  table {
    width: 100%;
    box-shadow: $box-shadow;

    thead {
      background: #F8F9FA;
    }

    th {
      border-bottom: 1px solid rgba($color-text, 0.2);
      border-collapse: separate;
      text-align: left;

      h4 {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 600;
      }
    }

    tr {
      &:not(:last-child) {
        border-bottom: 1px solid rgba($color-text, 0.2);
      }
    }

    tbody tr {
      &:hover {
        background: $color-bg;
        cursor: pointer;
      }
    }

    td {
      text-align: left;
      padding: 0.75rem 0.5rem;
      color: $color-text;
      font-size: 0.875rem;
    }

  }
}

.thWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 0.75rem 0.5rem;
}

